import React, { useState } from 'react'
import A from './A';
import B from './B';
import C from './C';

export default function DiffCom() {
  //声明一个状态
  let [count, setCount] = useState(0);
  return (
    <div>
      <h2>Diff Show</h2>
      <hr />
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>新增</button>
      <hr />
      <h2>对比不同类型的标签</h2>
      {count % 2 === 1 ? <div>你好</div> : <span>测试</span>}
      <h2>相同类型的标签</h2>
      {count % 2 === 1 ? <div id="1">你好</div> : <div id="2">测试</div>}
      <h2>对比不同类型的组件</h2>
      {count % 2 === 1 ? <A /> : <B />}
      <h2>对比相同类型的组件</h2>
      {count % 2 === 1 ? <C name="zhangsan" /> : <C name="lisi" />}
      <hr />
    </div>
  )
}
